<template>
  <v-app class="app">
    <v-toolbar
      color="#32359B"
      fixed
      dark
      flat
      scroll-off-screen
    >
      <!-- <v-toolbar-side-icon/> -->
      <v-toolbar-title>
        <img 
          src="/img/vuetify.png" 
          class="logo-img" 
          alt="Logo">
        <nuxt-link to="/">趣创益</nuxt-link>
      </v-toolbar-title>
      <v-spacer/>
      <v-toolbar-items>
        <v-btn flat><nuxt-link 
          class="menu-item" 
          to="/">首页</nuxt-link></v-btn>
        <v-btn flat><nuxt-link 
          class="menu-item" 
          to="/classes">课程体系</nuxt-link></v-btn>
        <v-btn flat><nuxt-link 
          class="menu-item" 
          to="/idea">教学理念</nuxt-link></v-btn>
        <v-btn flat><nuxt-link 
          class="menu-item" 
          to="/about">联系我们</nuxt-link></v-btn>
      </v-toolbar-items>
      <v-spacer/>
      <v-toolbar-items 
        v-if="!$auth.loggedIn" 
        class="menu-login">
        <v-btn
          flat
          small
          round
          nuxt
          to="/regisiter"
          color="default">注册</v-btn>
        <v-btn 
          small
          round
          nuxt
          to="/login"
          color="info">登录</v-btn>
      </v-toolbar-items>
      <v-toolbar-items 
        v-if="$auth.user" 
        class="menu-user">
        <v-menu 
          :nudge-bottom="14" 
          offset-y 
          origin="center center" 
          class="elelvation-1" 
          transition="scale-transition">
          <v-btn 
            slot="activator" 
            icon 
            flat>
            <v-badge 
              color="red" 
              overlap>
              <span slot="badge">3</span>
              <v-icon medium>notifications</v-icon>
            </v-badge>
          </v-btn>
        </v-menu>
        <v-menu 
          :nudge-bottom="10" 
          offset-y 
          origin="center center" 
          transition="slide-y-transition">
          <v-btn 
            slot="activator" 
            icon 
            large 
            flat>
            <v-avatar size="30px">
              <img 
                src="~assets/img/avatar.png" 
                alt="Michael Wang">
            </v-avatar>
          </v-btn>
          <v-list class="pa-0">
            <v-list-tile ripple="ripple">
              <v-list-tile-action>
                <v-icon>account_circle</v-icon>
              </v-list-tile-action>
              <v-list-tile-content>
                <v-list-tile-title>个人信息</v-list-tile-title>
              </v-list-tile-content>
            </v-list-tile>
            <v-list-tile 
              ripple="ripple" 
              @click="logout">
              <v-list-tile-action>
                <v-icon>logout</v-icon>
              </v-list-tile-action>
              <v-list-tile-content>
                <v-list-tile-title>退出</v-list-tile-title>
              </v-list-tile-content>
            </v-list-tile>
          </v-list>
        </v-menu>
      </v-toolbar-items>
    </v-toolbar>
    <nuxt class="page-content"/>
    <v-footer class="blue darken-2">
      <v-layout 
        row 
        wrap 
        align-center>
        <v-flex xs12>
          <div class="white--text ml-3">
            Copyright © 2015 - 2018 畅言科技（北京）有限公司版权所有 | 京ICP备16045198号-3 
          </div>
        </v-flex>
      </v-layout>
    </v-footer>
  </v-app>
</template>

<script>
export default {
  methods: {
    async logout() {
      await this.$auth.logout()
    }
  }
}
</script>

<style lang="stylus" scoped>
  .v-toolbar__title
    display flex
    align-items center
  .logo-img
    height 32px;
    margin-right 8px;
  .menu-item
    color #fff
    text-decoration none
    font-size 16px;
    &.link-exact-active
      color #FE6C16
  .page-content {
    padding-top 56px
  }
  .menu-login.v-toolbar__items
    .v-btn
      padding 0 8px
      height 24px !important

</style>
